<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    const bucket = new Set();
    const data = { text: 'hello world' };
    // const obj = new Proxy(data, {
    //     get(target, key) {
    //         bucket.add(effect);
    //         return target[key];
    //     },
    //     set(target, key, newVal) {
    //         target[key] = newVal;
    //         bucket.forEach(fn => fn());
    //         return true;
    //     }
    // });

    const obj = new Proxy(data, {
        get(target, key) {
            // 将 activeEffect 中存储的副作用函数收集到“桶”中
            if (activeEffect) {
                bucket.add(activeEffect);
            }
            return target[key];
        },
        set(target, key, newVal) {
            target[key] = newVal;
            bucket.forEach(fn => fn());
            return true;
        }
    });
    // function effect() {
    //     document.body.innerText = obj.text;
    // }
    // effect();

    
    // 用一个全局变量存储被注册的副作用函数
    let activeEffect;
    // effect 函数用于注册副作用函数
    function effect(fn) {
        // 当调用 effect 注册副作用函数时，将副作用函数 fn 赋值给 activeEffect
        activeEffect = fn;
        // 执行副作用函数
        fn();
    }

    effect(() => {
        // 匿名副作用函数
        console.log('effect run');  // 会打印 2 次
        document.body.innerText = obj.text;
    });
    
    setTimeout(() => {
        // obj.text = 'hello vue3';
        // 副作用函数中并没有读取 notExist 属性的值
        obj.notExist = 'hello vue3';
    }, 1000);

    

    
</script>

</html>